<template>
	<view>
		<basetab name='我的佣金'></basetab><!-- themeBg -->
		<view class="pageView" :style="'min-height:'+ (safeArea.height || 0) +'px;'">
			<view class="commissionView themeBg">
				<view class="top">
					<view class="commission">
						我的佣金：￥8989.00
					</view>
					<view class="btnbox" @click="jumpTo('/my-bus/withDraw/withDraw?type=1')">
						佣金提现
					</view>
				</view>
				<view class="bottom fr-a-c">
					<view class="fl-b-c" style="height:100%;justify-content: space-around;">
						<text style="font-size: 36rpx;font-weight: 700;">300.2</text>
						<text style="font-size: 24rpx;">今日收入(元)</text>
					</view>
					<view style="border-right: 1rpx solid #fff;width: 1rpx;height: 60rpx;">
					</view>
					<view class="fl-b-c" style="height:100%;justify-content: space-around;">
						<text style="font-size: 36rpx;font-weight: 700;">300.2</text>
						<text style="font-size: 24rpx;">已提现(元)</text>
					</view>
				</view>
			</view>
			<view style="margin-top: 53rpx;">
				<u-tabs :list="tabsList" lineColor="rgb(255, 136, 0)" :inactiveStyle="inactiveStyle"
					:activeStyle="activeStyle" lineWidth="96rpx"></u-tabs>
			</view>
			<view class="list">
				<view :class="{item:true, line:key <4}" v-for="key in 5" :key="key">
					<view class="side">
						<text style="font-size: 28rpx;color: #000;">钱包类型···</text>
						<text class="desc" style="margin-top: 15rpx;">2023-04-01 12:12:00</text>
					</view>
					<view class="side">
						<text v-if="key > 2" class="int">+4500</text>
						<text v-else class="minus">-4500</text>
						<text class="desc" style="margin-top: 15rpx;">余额 0.45</text>
					</view>
				</view>
			</view>
			<view style="margin-top: 104rpx;"><!-- rgba(183, 183, 183, 1); -->
				<u-loadmore :status="loadmore" nomoreText="没有更多记录了~" fontSize="24rpx" color="rgba(183, 183, 183, 1);" />
			</view>
		</view>
	</view>

</template>

<script>
	import basetab from '../../componets/bartop.vue'
	export default {
		components: {
			basetab
		},
		onLoad() {
			uni.getSystemInfoAsync({
				success: res => {
					this.safeArea = res.safeArea
				}
			})
		},
		data() {
			return {
				safeArea: {},
				loadmore: 'nomore', //loading nomore loadmore
				inactiveStyle: {
					fontSize: '32rpx',
					color: "rgb(153,153,153)"
				},
				activeStyle: {
					fontSize: '32rpx',
					color: 'rgba(255, 136, 0, 1)'
				},
				tabsList: [{
					name: '佣金记录',
				}, {
					name: '提现记录',
				}, ]
			}
		},
		methods: {
			jumpTo(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	.commissionView {
		margin-top: 20rpx;
		width: 690rpx;
		height: 260rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		color: #FFF;

		.top {
			height: 150rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 42rpx;
			box-sizing: border-box;

			.commission {
				font-size: 40rpx;
				font-weight: 700rpx;
			}

			.btnbox {
				border: 2rpx solid #fff;
				padding: 5rpx 11rpx;
				border-radius: 6rpx;
				font-size: 28rpx;
				margin-top: 2rpx;
			}
		}

		.bottom {

			height: 110rpx;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: rgba(255, 255, 255, .2);
		}
	}

	.list {
		margin-top: 38rpx;
		background-color: #fff;
		border-radius: 20rpx;
		width: 690rpx;
		padding: 20rpx 30rpx 60rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			justify-content: space-between;
			margin-top: 21rpx;

			.side {
				display: flex;
				flex-direction: column;
			}

			.desc {
				color: rgba(166, 166, 166, 1);
				font-size: 24rpx;
			}
		}

		.line {
			padding-bottom: 19rpx;
			border-bottom: 2rpx solid rgba(204, 204, 204, 0.5);
		}

		.minus {
			color: rgba(6, 92, 41, 1);
		}

		.int {
			color: rgba(212, 48, 48, 1)
		}
	}
</style>